<div class="main">
    <h2 *ngIf="!volume">Add a new volume</h2>
    <h2 *ngIf="volume">Edit volume <i>{{volume.name}}</i></h2>
    <div class="description">A volume can be mounted and shared by several containers.</div>
    <form [formGroup]="form">
        <mat-form-field appearance="outline" class="mid-width">
            <mat-label><span>Name</span></mat-label>
            <mat-error>Lowercase words separated by dashes. Ex: my-volume</mat-error>
            <input placeholder="unique name to identify the volume" data-cy="volume-name" matInput formControlName="name">
        </mat-form-field>
        <mat-form-field appearance="outline" class="mid-width">
            <mat-label><span>Size</span></mat-label>
            <mat-error>Example of valid quantities: 300k (300*1000), 30Mi(30*1024²), 3Gi (3*1024³), 3G (3*1000³)</mat-error>
            <input placeholder="Minimal size of the volume" data-cy="volume-size" matInput formControlName="size">
        </mat-form-field>
        <mat-checkbox data-cy="volume-ephemeral" formControlName="ephemeral">Volume is Ephemeral</mat-checkbox>

    </form>

    <button *ngIf="!volume" data-cy="volume-create" [disabled]="form.invalid" mat-flat-button color="primary" matTooltip="create new volume" (click)="create()">Create</button>
    <button *ngIf="volume" data-cy="volume-save" [disabled]="form.invalid" mat-flat-button color="primary" matTooltip="save volume" (click)="save()">Save</button>
    <button *ngIf="cancelable" mat-flat-button (click)="cancel()">Cancel</button>
</div>